/*
 * @Descripttion:
 * @version:
 * @Author: kl2018
 * @Date: 2020-04-09 10:28:34
 * @LastEditors: kl2018
 * @LastEditTime: 2020-08-18 14:16:49
 */
import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { Row, Col, Spin, Button } from 'antd';
import { WeaTop, WeaTab, WeaRightMenu, WeaRadioGroup, WeaDialog, WeaTools, WeaLocaleProvider, WeaMoreButton, WeaAlertPage } from 'ecCom';

const getLabel = WeaLocaleProvider.getLabel;

import ReportFlowEchartDetailListDialogComponent from './ReportFlowEchartDetailListDialogComponent';
import ReportFlowDetailListDialogComponent from './ReportFlowDetailListDialogComponent';
import ReportDocDetailListDialogComponent from './ReportDocDetailListDialogComponent';
import ReportDocEchartDetailListDialogComponent from './ReportDocEchartDetailListDialogComponent';
import '../../../workflow/util/windowFun';// 支持openSPA4Single,doPrintRequest,showallreceived等方法
import { formatData } from '../../util/odocUtil2';

import FlowChartComponent from './FlowChartComponent';
import CustomReport from './CustomReport';

@inject('reportStore')
@inject('reportFlowDetailListDialogStore')
@inject('reportFlowEchartDetailListDialogStore')
@inject('reportDocDetailListDialogStore')
@inject('reportDocEchartDetailListDialogStore')
@inject('customReportStore')

@observer
class ReportComponent extends React.Component {
  constructor(props) {
    super(props);
    this.tabs = [
      {
        color: '#000000',
        title: getLabel('383718', '流程统计'),
        viewcondition: '0',
      },
      {
        color: '#000000',
        title: getLabel('384732', '公文统计'),
        viewcondition: '1',
      },
      // {
      // 	title: "自定义报表",
      // 	viewcondition: "2"
      // }
    ];
  }

  componentDidMount() {
    const { reportStore } = this.props;
    if (this.props.params.id) {
      reportStore.setMobxStatus({ isSingleReport: true });
    }
    reportStore.buildSearchCondition();
  }

  renderCountData() {
    const { reportStore, reportFlowDetailListDialogStore } = this.props;
    const countDatas = reportStore.countDatas;

    let rows = [];
    if (countDatas.length > 0) {
      countDatas.map((data, index) => {
        let style = {
          color: '#FFFFFF',
          fontSize: '28px',
          background: data.iconBackground,
          borderRadius: '50%',
          padding: 10,
          display: 'inline-block',
          verticalAlign: 'bottom',
        };

        rows.push(
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3ksbse@${index}`} span={8} className="count-col">
            <span className={data.icon} style={style} />
            {
              <ul>
                <li>{data.title}</li>
                <li><a onClick={() => reportFlowDetailListDialogStore.showDialog(index)} >{data.num}</a></li>
                <li><span className={data.isUpClass} /><span style={{ marginLeft: '10px' }}>{data.percent}</span>  {data.suffix}</li>
              </ul>
            }
          </Col>,
        );
      });
    }
    return (<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9ynif7`} className="count-container">{rows}</Row>);
  }

  getRightMenu = () => {
    const { selectedTab } = this.props.reportStore;
    let right = [];
    if (selectedTab == '2') {
      const { rightMenuData } = this.props.customReportStore;
      right = toJS(rightMenuData);
    }
    return right;
  };

  render() {
    const { reportStore, reportFlowEchartDetailListDialogStore, reportFlowDetailListDialogStore, reportDocDetailListDialogStore, reportDocEchartDetailListDialogStore } = this.props;
    const { echart1, echart2, docChart1, docChart2, docChart3, docChart4, docChart5, docChart1title, docChart2title, docChart3title,
      docChart4title, docChart5title, loading, selectedTab, changeSelectedTab,
      echart2title, searchConfigFlow, doSearch, searchConfigDoc, searchParamsFlow, searchParamsDoc, hasRight } = reportStore;
    this.flowEchartDetailListDialogButtons = [
      <WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@ok5mwk@more`} collectParams={{ favname: '', favouritetype: 2, objid: 0, importantlevel: 1 }} />,
    ];
    this.flowDetailListDialogButtons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yqbdc5@export`} type="primary" onClick={() => this.exportAll('flow')} >{getLabel('28343', '导出Excel')}</Button>,
      <WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@a4qvcz@more`}
        collectParams={{ favname: '', favouritetype: 2, objid: 0, importantlevel: 1 }}
        datas={[{
          key: '1',
          icon: <i className="icon-coms-home" />,
          content: getLabel('32535', '显示列定制'),
          onClick: this.showFlowDetailCustomCol,
        }]}
      />,
    ];
    this.docDetailListDialogButtons = [
      <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3n0412@export`} type="primary" onClick={() => this.exportAll('doc')} >{getLabel('28343', '导出Excel')}</Button>,
      <WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@ai4oky@more`}
        collectParams={{ favname: '', favouritetype: 2, objid: 0, importantlevel: 1 }}
        datas={[{
          key: '1',
          icon: <i className="icon-coms-home" />,
          content: getLabel('32535', '显示列定制'),
          onClick: this.showDocDetailCol,
        }]}
      />,
    ];
    this.docEchartDetailListDialogButtons = [
      <WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@kddgbh@more`} collectParams={{ favname: '', favouritetype: 2, objid: 0, importantlevel: 1 }} />,
    ];
    if (!hasRight) {
      return (<div style={{ position: 'relative', height: '100%' }}>
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@4pio7n`} {...this.state} >
          <div style={{ color: '#000' }}>
            {getLabel('388588', '你没有访问当前页面的权限！')}
          </div>
        </WeaAlertPage>
      </div>);
    }
    return (
      <div className="wea-odoc-report">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@jfvids`} datas={this.getRightMenu()} >
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@7qvta9`} spinning={loading}>
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@pt9tc9`}
              title={getLabel('384731', '公文报表')}
              icon={<i className="icon-coms-official" />}
              iconBgcolor="#f14a2d"
            >
              <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@xop9lz`}
                datas={this.tabs}
                keyParam="viewcondition" // 主键
                selectedKey={selectedTab}
                onChange={changeSelectedTab}
              />

              {
                selectedTab == 0 && (
                  <div className="report" >
                    <div className="report-row">
                      <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@drj8y2`} config={searchConfigFlow} onChange={doSearch} />
                    </div>
                    <div className="report-row">
                      {this.renderCountData()}
                    </div>

                    {
                      echart2title == '' && (
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@lxs59n`} gutter={10}>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5z911w`} span={24}>
                            <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@k56k0t`} title={`${getLabel('383719', '公文流程拟办排名')}（Top5）`} id="flowchart1" echart={echart1} />
                          </Col>
                        </Row>
                      )
                    }

                    {
                      echart2title !== '' && (
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@34qyjl`} gutter={10}>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@a4lq48`} span={12}>
                            <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@8xovtw`} title={`${getLabel('383719', '公文流程拟办排名')}（Top5）`} id="flowchart1" echart={echart1} />
                          </Col>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@m4ayyb`} span={12} className="col_flowchart2">
                            <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@b8n92q`} title={echart2title} id="flowchart2" echart={echart2} />
                          </Col>
                        </Row>
                      )
                    }

                    <div className="report-row" style={{ float: 'right' }}>
                      {getLabel(382151, '本报表数据统计截止到：') + formatData('yyyy-MM-dd hh:mm')}
                    </div>
                  </div>
                )
              }
              {
                selectedTab == 1 && (
                  <div>
                    <div className="report" >
                      <div className="report-row">
                        <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@cxh52m`} config={searchConfigDoc} onChange={doSearch} />
                      </div>
                      <div className="report-row">
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ftxhyj`} gutter={10}>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1f9xk3`} span={12}>
                            <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@kd581w`} title={`${docChart1title}（Top10）`} id="docchart1" echart={docChart1} />
                          </Col>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lgxun1`} span={12}>
                            <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@bljmld`} title={`${docChart2title}（Top10）`} id="docchart2" echart={docChart2} />
                          </Col>
                        </Row>
                        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0pksbu`} gutter={10}>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dyxt7y`} span={12}>
                            <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@lr98k9`} title={`${docChart4title}（Top10）`} id="docchart4" echart={docChart4} />
                          </Col>
                          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@iktme5`} span={12}>
                            <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@syotcn`} title={`${docChart5title}（Top10）`} id="docchart5" echart={docChart5} />
                          </Col>
                        </Row>
                      </div>
                      <div className="report-row div_docchart3">
                        <FlowChartComponent ecId={`${this && this.props && this.props.ecId || ''}_FlowChartComponent@xue20d`} title={docChart3title} id="docchart3" echart={docChart3} />
                      </div>
                      <div className="report-row" style={{ float: 'right' }}>
                        {getLabel(382151, '本报表数据统计截止到：') + formatData('yyyy-MM-dd hh:mm')}
                      </div>
                    </div>
                  </div>
                )
              }
              {
                selectedTab == 2 && (<CustomReport ecId={`${this && this.props && this.props.ecId || ''}_CustomReport@0hc6is`} />)
              }
            </WeaTop>
          </Spin>
        </WeaRightMenu>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@546k1h`}
          title={getLabel('383719', '公文流程拟办排名')}
          icon={'icon-coms-official'}
          iconBgcolor={'#f14a2d'}
          visible={reportFlowEchartDetailListDialogStore.visable}
          style={{ width: '70%', height: 700 }}
          onCancel={reportFlowEchartDetailListDialogStore.hideDialog}
          hasScroll
          buttons={this.flowEchartDetailListDialogButtons}
        >
          <ReportFlowEchartDetailListDialogComponent
            ecId={`${this && this.props && this.props.ecId || ''}_ReportFlowEchartDetailListDialogComponent@6xcwb5`}
            searchParams={searchParamsFlow}
            name={reportFlowEchartDetailListDialogStore.condition_name}
          />
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@sv6fjp`}
          title={getLabel('383302', '具体流程清单')}
          icon={'icon-coms-official'}
          iconBgcolor={'#f14a2d'}
          visible={reportFlowDetailListDialogStore.visable}
          hasScroll
          style={{ width: '70%', height: 700 }}
          onCancel={reportFlowDetailListDialogStore.hideDialog}
          buttons={this.flowDetailListDialogButtons}
        >
          <ReportFlowDetailListDialogComponent ecId={`${this && this.props && this.props.ecId || ''}_ReportFlowDetailListDialogComponent@jt3dra`}
            searchParams={searchParamsFlow}
            status={reportFlowDetailListDialogStore.condition_status}
            key={reportFlowDetailListDialogStore.condition_key}
          />
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@jx4uwo`}
          title={getLabel('383855', '具体公文清单')}
          icon={'icon-coms-official'}
          iconBgcolor={'#f14a2d'}
          visible={reportDocDetailListDialogStore.visable}
          style={{ width: '70%', height: 700 }}
          onCancel={reportDocDetailListDialogStore.hideDialog}
          hasScroll
          buttons={this.docDetailListDialogButtons}
        >
          <ReportDocDetailListDialogComponent
            ecId={`${this && this.props && this.props.ecId || ''}_ReportDocDetailListDialogComponent@taj4h4`}
            searchParams={searchParamsDoc}
            status={reportDocDetailListDialogStore.condition_status}
            key={reportDocDetailListDialogStore.condition_key}
          />
        </WeaDialog>

        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ly24pk`}
          title={reportDocEchartDetailListDialogStore.getDialogTitleName()}
          icon={'icon-coms-official'}
          iconBgcolor={'#f14a2d'}
          visible={reportDocEchartDetailListDialogStore.visable}
          style={{ width: '70%', height: 700 }}
          hasScroll
          onCancel={reportDocEchartDetailListDialogStore.hideDialog}
          buttons={this.docEchartDetailListDialogButtons}
        >
          <ReportDocEchartDetailListDialogComponent
            ecId={`${this && this.props && this.props.ecId || ''}_ReportDocEchartDetailListDialogComponent@z8evp1`}
            searchParams={searchParamsDoc}
            name={reportDocEchartDetailListDialogStore.condition_name}
            analyseType={reportDocEchartDetailListDialogStore.condition_analyseType}
          />
        </WeaDialog>
      </div>
    );
  }

  exportAll(type) {
    const { reportDocDetailListDialogStore, reportFlowDetailListDialogStore } = this.props;
    let dataKey = '';
    // filename = '';
    if (type === 'flow') {
      dataKey = reportFlowDetailListDialogStore.dataKey;
      // filename = getLabel('383302', '具体流程清单');
    } else if (type === 'doc') {
      dataKey = reportDocDetailListDialogStore.dataKey;
      // filename = getLabel('383855', '具体公文清单');
    }
    WeaTools.callApi('/api/ec/dev/table/export', 'POST', { dataKey, filetype: '', filename: '' }).then(
      result => window.location.href = result.url,
    );
  }

  showFlowDetailCustomCol = () => {
    const { reportFlowDetailListDialogStore } = this.props;
    reportFlowDetailListDialogStore.tableStore.setColSetVisible(true);
    reportFlowDetailListDialogStore.tableStore.tableColSet(true);
  }

  showDocDetailCol = () => {
    const { reportDocDetailListDialogStore } = this.props;
    reportDocDetailListDialogStore.tableStore.setColSetVisible(true);
    reportDocDetailListDialogStore.tableStore.tableColSet(true);
  }
}

export default ReportComponent;
